<!DOCTYPE html>
<html lang="en" theme="dark">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Playlist download</title>
    <link rel="stylesheet" href="../assets/css/index.css">
    <script src="../src/playlist_new.js" defer></script>
    <script src="../src/common.js" defer></script>
    <!-- Translating -->
    <script>window.i18n = new (require('../translations/i18n'));</script>
    <style>
        .playlistCheck {
            position: absolute;
            bottom: 8px;
            right: 8px;
            width: 25px;
            height: 25px;
        }
    </style>
</head>

<body>
    <!-- Popup message -->
    <span id="popupText">Text copied</span>

    <!-- Menu icon -->
    <img src="../assets/images/menu.png" alt="menu" id="menuIcon">

    <!-- Menu -->
    <div id="menu">
        <a id="homeWin" class="menuItem">Homepage</a>
        <a id="preferenceWin" class="menuItem">Preferences</a>
        <a id="historyWin" class="menuItem">History</a>
        <a id="aboutWin" class="menuItem">About</a>
        <span id="themeTxt" class="menuItem">Theme:</span>
        <select name="themeToggle" id="themeToggle">
            <option id="lightTxt" value="light">Light</option>
            <option id="darkTxt" value="dark">Dark</option>
            <option id="frappeTxt" value="frappe">Frappé</option>
            <option id="onedarkTxt" value="onedark">One dark</option>
            <option id="matrixTxt" value="matrix">Matrix</option>
            <option id="githubTxt" value="github">Github</option>
            <option id="latteTxt" value="latte">Latte</option>
            <option id="solarizedDarkTxt" value="solarized-dark">Solarized Dark</option>
        </select>
    </div>

    <button class="submitBtn" id="pasteLink">Click to paste playlist link from clipboard [Ctrl + V]</button>

    <div id="loadingWrapper">
        <span id="processing">Loading </span>
        <svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
            y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
            <circle fill="rgb(84, 171, 222)" stroke="none" cx="6" cy="50" r="6">
                <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1" />
            </circle>
            <circle fill="rgb(84, 171, 222)" stroke="none" cx="26" cy="50" r="6">
                <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2" />
            </circle>
            <circle fill="rgb(84, 171, 222)" stroke="none" cx="46" cy="50" r="6">
                <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.3" />
            </circle>
        </svg>
    </div>

    <p id="incorrectMsg"></p>
    <button class="advancedToggle" id="errorBtn" onclick="toggleErrorDetails()">Error Details ▼</button>
    <div id="errorDetails" onclick="copyErrorToClipboard()"></div>
    <div id="data">
    </div>
    <div id="goToTop"></div>
</body>

</html>